A stacked Bar chart showing income/expenditure

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var data1 = [[2,5,9],[4,2,6],[6,5,8]];
        var data2 = [-4,-5,-20];
        
        // Top bar chart
        var bar1 = new RGraph.Bar({
            id: 'cvs',
            data: data1,
            options: {
                shadow: false,
                strokestyle: 'rgba(0,0,0,0)',
                noaxes: true,
                ylabels: false,
                colors: ['blue','pink','aqua'],
                hmargin: 25,
                strokestyle: 'rgba(0,0,0,0)',
                backgroundGrid: false,
                gutterBottom: 125,
                grouping: 'stacked',
                ymax: 20,
                textAccessible: true
            }
        }).wave()

        // Bottom bar chart
        var bar2 = new RGraph.Bar({
            id: 'cvs',
            data: data2,
            options: {
                shadow: false,
                colors: ['red'],
                hmargin: 25,
                xaxispos: 'center',
                backgroundGrid: false,
                ymax: 20,
                textAccessible: true
            }
        }).wave()
    };
</script>